<template>
    <el-dialog title="商品列表" :visible="visible" append-to-body :destroy-on-close="true" @close="close">
        <el-form size="small" inline label-position="right">
            <el-form-item label="商品类型">
                <el-select v-model="searchForm.goods_type" placeholder="请选择" clearable @clear="reload">
                    <el-option value="10" label="自营">自营</el-option>
                    <el-option value="20" label="供货商">供货商</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品分类" prop="categoryIds">
                <el-cascader v-model="searchForm.categoryId" :options="cateGoryList" :clearable="true" :props="{
                    label: 'name',
                    value: 'category_id',
                    checkStrictly: true
                }" ref="cascader" placeholder="请选择上级分类"></el-cascader>
            </el-form-item>
            <!-- <el-form-item label="商品搜索" label-for="keyword">
                <el-input v-model="searchForm.keyword" placeholder="请输入内容" clearable>
                    <el-select v-model="searchForm.search_type" slot="prepend" style="width: 100px">
                        <el-option value="0" label="全部"></el-option>
                        <el-option value="2" label="商品名称"></el-option>
                        <el-option value="3" label="商品编码"></el-option>
                    </el-select>
                </el-input>
            </el-form-item> -->
            <el-form-item label="商品名称" label-for="goods_name">
                <el-input v-model="searchForm.goods_name" placeholder="请输入商品名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="reload">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table size="small" header-cell-class-name="table_header_cell" :data="list" v-loading="isLoading"
            @selection-change="handleSelectRow" :row-key="getRowKey" ref="goodsTable" height="360">
            <el-table-column type="selection" width="55" :reserve-selection="true" v-if="checkType == 'check'">
            </el-table-column>
            <el-table-column label="选择" width="66" prop="goods_id" align="center" v-else>
                <template slot-scope="scope">
                    <el-radio :label="scope.row.goods_id" v-model="radioGoodsId"
                        @input="getRadioVal($event, scope.row.goods_image)"></el-radio>
                </template>
            </el-table-column>
            <el-table-column prop="goods_id" label="商品ID" width="100" align="center">
            </el-table-column>
            <el-table-column prop="name" label="商品图片" width="100">
                <template slot-scope="scope">
                    <el-image :src="scope.row.goods_image" fit="contain" class="goods-img">
                        <div slot="error" class="image-slot">
                            <p>暂无图片</p>
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="goods_name" label="商品名称">
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <pagination v-if="searchForm.total" :total="searchForm.total" :page.sync="searchForm.page"
                :limit.sync="searchForm.limits" @pagination="getGoodsList" />
            <el-button type="primary" class="btn" size="small" @click="getSelectGoods()">提 交</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { goodsList, cateGoryList } from "@/api/goods";
import { getCompanyData } from "@/api/setting.js";
export default {
    name: 'selectGoodsModal',
    props: {
        checkType: {
            type: String,
            default: 'check'// check -- 多选  radio 单选
        },
        selectionGoodsIds: Array,
    },
    data() {
        return {
            visible: false,
            searchForm: {
                page: 1,
                limits: 15,
                total: 0,
                listType: 'all',
                goods_type: '20',
                // search_type: '0',
                // keyword: '',
                goods_name: '',
                categoryId: '',
            },
            radioGoodsId: '',
            radioGoodsItem: {},
            treeSelect: [],
            isLoading: false,
            list: [],
            // 已选择的列表记录
            selectedItems: [],
            cateGoryList: []
        }
    },
    created() {
        this.isLoading = true;
        this.getCateGoryList();
    },
    methods: {
        show() {
            this.visible = true;
        },
        reload() {
            this.isLoading = true;
            this.list = [];
            this.searchForm.page = 1;
            this.getGoodsList()
        },
        getCateGoryList() {
            cateGoryList({
                status: "-1",
                company_id: this.searchForm.company_id,
            }).then((res) => {
                this.isLoading = false;
                if (res.code == 0) {
                    // res.data.forEach(v => {
                    //     if (!v.children) {//一级下面没有子元素
                    //         v.disabled = true;
                    //     } else {
                    //         v.children.forEach(item => {
                    //             if (!item.children) {
                    //                 item.disabled = true;
                    //             }
                    //         })
                    //     }
                    // })
                    this.cateGoryList = res.data;
                }
            });
        },
        //获取商品列表
        getGoodsList() {
            const that = this;
            goodsList(this.searchForm).then((res) => {
                that.isLoading = false;
                if (res.code == 0) {
                    that.list = res.data.data;
                    if (that.selectionGoodsIds.length) {
                        // that.$refs.elTable 当前表格ref
                        that.$refs.goodsTable.clearSelection()
                        that.selectionGoodsIds.forEach(row => {
                            const selectedRow = that.list.find(item => item.goods_id === row.goods_id)
                            if (selectedRow) {
                                // 当前页(第一页)需要被选中的数据使其选中
                                that.$refs.goodsTable.toggleRowSelection(selectedRow, true);
                            } else {
                                // 不在当前页(第二页)的数据，也硬塞到@selection-change的参数中，这时当你在第一页选中其他数据时，selection-change的参数也会带着第二页的数据
                                that.$refs.goodsTable.toggleRowSelection(row, true);
                            }
                        })
                    }
                    that.searchForm.total = res.data.total;
                }
            });
        },
        getRowKey(row) {
            return row.goods_id;
        },
        handleSelectRow(newSelectedItems) {
            this.selectedItems = newSelectedItems.map(v => {
                const goodsItem = {
                    goods_image: v.goods_image,
                    goods_id: v.goods_id
                }
                return goodsItem;
            })
        },
        getSelectGoods() {
            if (this.checkType == 'check') {
                this.visible = false;
                this.$emit('getSelectGoods', this.selectedItems)
            } else {
                if (!this.radioGoodsId) {
                    this.$message.warning('请选择商品！')
                    return;
                }
                this.visible = false;
                this.$emit('getSelectGoods', this.radioGoodsItem)
            }
        },
        getRadioVal(val, image) {
            this.radioGoodsId = val;
            this.radioGoodsItem.goods_id = val;
            this.radioGoodsItem.goods_image = image;
        },
        close() {
            this.visible = false;
            if (this.checkType == 'radio') {
                this.radioGoodsId = '';
                this.radioGoodsItem = {};
            }
        }
    }
}
</script>
<style scoped>
/deep/ .el-dialog {
    width: 900px;
}

/deep/ .el-dialog__body {
    padding: 20px 20px;
}

/deep/ .el-radio__label {
    display: none;
}

.dialog-footer {
    height: 56px;
    display: inline-flex;
    align-items: center;
}

.btn {
    margin-left: 20px;
}

.goods-img {
    width: 50px;
    height: 50px;
}
</style>
